<script setup lang="ts">
import type { VbenFormProps } from '@vben/common-ui';
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';

import type { RowType } from './sysOperateLog.data';

import { createVNode, ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { message, Modal } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  sysOperateLogDeleteBatchApi,
  sysOperateLogQueryByIdApi,
  sysOperateLogQueryPageListApi,
} from '#/api/system/sysOperateLog';
import { SparkDescriptions } from '#/components';
import { queryDictOptionsApi, useDictionaries } from '#/utils';

import SysOperateLogFormModal from './modules/SysOperateLogFormModal.vue';
import { DetailsColumns } from './sysOperateLog.data';

const { translateValue } = useDictionaries(['operate_type', 'ok_fail']);

const detailsRef = ref();

const formOptions: VbenFormProps = {
  layout: 'horizontal',
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-5',
  showCollapseButton: false,
  actionButtonsReverse: false,
  showDefaultActions: true,
  submitOnChange: false,
  submitOnEnter: false,
  commonConfig: {
    colon: true,
    labelWidth: 80,
  },
  schema: [
    {
      component: 'Input',
      label: '模块',
      fieldName: 'moduleName',
      componentProps: {
        placeholder: '请输入模块',
      },
    },
    {
      component: 'ApiSelect',
      label: '业务类型',
      fieldName: 'businessType',
      componentProps: {
        placeholder: '请选择业务类型',
        allowClear: true,
        showSearch: true,
        afterFetch: (data) => {
          return data.map((item: any) => ({
            label: item.itemText,
            value: Number.parseInt(item.itemVal),
          }));
        },
        api: queryDictOptionsApi,
        params: {
          dictCode: 'operate_type',
        },
      },
    },
    {
      component: 'Input',
      label: '操作地点',
      fieldName: 'operLocation',
      componentProps: {
        placeholder: '请输入操作地点',
      },
    },
    {
      component: 'ApiSelect',
      label: '操作状态',
      fieldName: 'status',
      componentProps: {
        placeholder: '请选择操作状态',
        allowClear: true,
        showSearch: true,
        afterFetch: (data) => {
          return data.map((item: any) => ({
            label: item.itemText,
            value: Number.parseInt(item.itemVal),
          }));
        },
        api: queryDictOptionsApi,
        params: {
          dictCode: 'ok_fail',
        },
      },
    },
  ],
};

const gridOptions: VxeTableGridOptions<RowType> = {
  height: 'auto',
  columns: [
    { type: 'checkbox', width: 50, fixed: 'left', align: 'center' },
    { title: '序号', type: 'seq', width: 50, fixed: 'left', align: 'center' },
    {
      title: '模块',
      field: 'moduleName',
      align: 'center',
      detail: {
        enable: false,
      },
    },
    {
      title: '业务类型',
      field: 'businessType',
      align: 'center',
      cellRender: {
        name: 'CellDict',
        attrs: {
          dictCode: 'operate_type',
          translateValue,
        },
      },
    },
    {
      title: '请求URL',
      field: 'operUrl',
      align: 'center',
    },
    {
      title: '方法名称',
      field: 'methodName',
      align: 'center',
    },
    {
      title: '请求方式',
      field: 'requestMethod',
      align: 'center',
    },
    // {
    //   title: '操作类别',
    //   field: 'operatorType',
    //   align: 'center',
    // },
    {
      title: '操作人员',
      field: 'operName',
      align: 'center',
    },
    // {
    //   title: '部门名称',
    //   field: 'deptName',
    //   align: 'center',
    // },
    {
      title: '主机地址',
      field: 'operIp',
      align: 'center',
    },
    {
      title: '操作地点',
      field: 'operLocation',
      align: 'center',
    },
    // {
    //   title: '请求参数',
    //   field: 'operParam',
    //   align: 'center',
    // },
    // {
    //   title: '响应参数',
    //   field: 'jsonResult',
    //   align: 'center',
    // },
    {
      title: '操作状态',
      field: 'status',
      align: 'center',
      cellRender: {
        name: 'CellDict',
        attrs: {
          dictCode: 'ok_fail',
          translateValue,
        },
      },
    },
    // {
    //   title: '错误消息',
    //   field: 'errorMsg',
    //   align: 'center',
    // },
    {
      title: '操作时间',
      field: 'operTime',
      align: 'center',
      width: 160,
    },
    {
      title: '消耗时间',
      field: 'costTime',
      align: 'center',
      slots: {
        default: 'costTime',
      },
    },
    {
      title: '主键',
      field: 'id',
      align: 'center',
      visible: false,
    },
    {
      title: '创建人',
      field: 'createBy',
      align: 'center',
      visible: false,
    },
    {
      title: '创建时间',
      field: 'createTime',
      align: 'center',
      visible: false,
    },
    {
      title: '更新人',
      field: 'updateBy',
      align: 'center',
      visible: false,
    },
    {
      title: '更新时间',
      field: 'updateTime',
      align: 'center',
      visible: false,
    },
    {
      title: '操作',
      field: 'action',
      align: 'center',
      width: 100,
      fixed: 'right',
      slots: {
        default: 'action',
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await sysOperateLogQueryPageListApi({
          pageNo: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};
const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
const [FromModal] = useVbenModal({
  connectedComponent: SysOperateLogFormModal,
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      gridApi.query();
    }
  },
});
async function handlerDetails(row) {
  detailsRef.value.open({ id: row.id }, DetailsColumns);
}
async function handlerBatchDel() {
  const checkboxRecords = gridApi.grid.getCheckboxRecords();
  if (checkboxRecords.length === 0) {
    message.warn('至少选中一行');
  } else {
    const idArray = checkboxRecords.map((record) => record.id);
    const ids = idArray.join(',');
    Modal.confirm({
      title: '系统提示?',
      content: createVNode(
        'div',
        { style: 'color:red;' },
        '确认删除所选中行吗?',
      ),
      onOk() {
        sysOperateLogDeleteBatchApi(ids).then(() => {
          message.success('删除成功');
          gridApi.query();
        });
      },
      class: 'test',
    });
  }
}
</script>

<template>
  <Page auto-content-height>
    <FromModal class="w-[50%]" />
    <SparkDescriptions
      class="w-[60%]"
      title="操作日志详情"
      ref="detailsRef"
      :api="sysOperateLogQueryByIdApi"
    />
    <Grid>
      <template #toolbar-tools>
        <a-button type="primary" danger @click="handlerBatchDel()">
          批量删除
        </a-button>
      </template>
      <template #action="{ row }">
        <a-button type="link" size="small" @click="handlerDetails(row)">
          详情
        </a-button>
      </template>
      <template #costTime="{ row }"> {{ row?.costTime }} 毫秒 </template>
    </Grid>
  </Page>
</template>
